


class login {
	constructor() {
		console.log(this.$(".login-btn"));
		// 给登入按钮绑定点击事件
		this.$(".login-btn").addEventListener('click', this.getDate.bind(this));

		//  这里是判断导航栏中?号后面的值,是否存在
		// location.search 是获取 导航栏中? 号后面的值
		let hash = location.hash;
		console.log(hash);

		if (hash) {
			// 因为这里的search是一个字符串,我们就可以使用字符串转换数组的方法 字符串.split('分割符')
			// 将字符串转换为数组
			let arr = hash.split('=');
			console.log(arr[1]);
			this.url = arr[1]
			console.log(this.url);
			// 这里我们只需要下标元素为1 的地址元素
			// location.href = arr[1];
		}
	}


	/**********登入按钮绑定点击事件的方法,并获取form表单中的值***********/
	getDate() {
		//  console.log(this);
		// 这里是获取页面中的form表单 ,因为页面中只有一个form,所以 这里就使用了form[0]
		let forms = document.forms[0].elements;
		// 这里是获取form表单中邮箱/手机号的值  并进行去除空格的操作
		let username = forms[0].value.trim();
		// 这里是获取form表单中输入密码的值  并进行去除空格的操作
		let password = forms[1].value.trim();
		// 这里是进行判断,用户是否输入了密码和用户名,如果没有输入就,抛出一个异常.停止代码的运行
		if (!username || !password) throw new Error('内容不能为空');

		// 这里是将获取到的formbiaod中的值以  post 传递方式的形式进行拼接  
		// post传递的方式  样式 key=val&key=val
		let datas = `username=${username}&password=${password}`
		// 这里是设置请求头,不设置请求头的话,发送的请求格式JSON的与咱们使用的服务器的发送方式不符
		axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
		//   这里是想服务器发送post请求,   
		// post请求的格式  
		// axios.post('请求的地址',请求是传递的参数) 

		// 这里的then是服务器的返回的值
		axios.post(' http://localhost:8888/users/login', datas).then((en) => {
			 console.log(en); 
			// 这里我们需要en中的data中的code 和en 中status(服务器状态的值)  和en 中data中 user的id值

			// 这里是进行判断post成功之后,服务器给我返回的值里面的参数
			// en.data.code 是数据传递的状态  =1 表示正常
			// en.status 是服务器的状态 ==200表示服务器正常
			if (en.data.code == 1 && en.status == 200) {
				// 这里是将服务器给我们返回的token秘钥,以localStorage的方式传递到页面下面的localStorage中
				localStorage.setItem('token', en.data.token);
				localStorage.setItem('user_id', en.data.user.id);
				localStorage.setItem('nickname', en.data.user.nickname)

				if (this.url) {
					location.href = this.url;
				}
			}
		})

	}
	// "account-input"
	// "password-input"



	// 创建一个获取节点对象的方法
	$(ele) {
		let data = document.querySelectorAll(ele);
		// 这里是进行判断,如果获取到的节点数量为 1 个就返回这一个节点对象 , 如果获取到节点数量超出一个,就返回获取到的节点集合
		return data.length == 1 ? data[0] : data;
	}
}
new login;